import React from "react";
import Admin from "../../../layout/Admin";
import PlanModel from "../../../model/plan";
import {Button, Checkbox, Input, Modal, Table,} from "antd";
import Info from "../../../service/info";
let letters = 'abcdefghijklmnopqrstuvwxyz'

class PlanQuiz extends React.Component {

    constructor(props) {
        super(props)
        this.model = new PlanModel()
        this.state = {
            list: [],
            modal: {
                add: false,
            },
            options: [{text:'', checked: false},],
            topic: '',
            answer: [],
        }
    }

    componentDidMount() {
        this.all()
    }

    all() {
        this.model
            .allQuiz()
            .then(resp => {
                const list = resp.data.ok
                if (list) {
                    this.setState({
                        list,
                    })
                }
            })
    }

    add() {
        const options = this.state.options
        const answers = []
        options.forEach((option, i) => {
            // option.text = letters[i] + '，' + option.text
            if (option.checked) {
                answers.push(option.text)
            }
        })

        this.model
            .addQuiz({
                Topic: this.state.topic,
                Option: options.map(o => o.text),
                Answer: answers,
            })
            .then((resp) => {
                const data = resp.data
                if (data.ok === 1) {
                    Info.success('添加成功')
                    this.setState({
                        options: [{text: '', checked: false,}],
                        topic: '',
                    })
                    this.all()
                }
            })
    }

    addOption() {
        this.setState({
            options: [...this.state.options, {text: '', checked: false,},]
        })
    }

    deleteOption(index) {
        const options = this.state.options
        options.splice(index, 1)
        this.setState({
            options,
        })
    }

    deleteQuiz(quiz) {
        console.log(quiz)
        this.model.deleteQuiz({Pid: quiz.Id})
            .then(resp => {
                const data = resp.data
                console.log(data)
                if (data.ok === 1) {
                    Info.success('删除问题成功')
                } else {
                    Info.error('删除出现问题')
                }
            })
            .then(() => {
                this.all()
            })
    }

    onOptionCheck(event, index) {

        const checked = event.target.checked
        const options = this.state.options
        options[index].checked = checked
        this.setState({
            options,
        })
    }

    callModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: true,
            }
        })
    }

    cancelModal(key) {
        this.setState({
            ...this.state,
            modal: {
                ...this.state.modal,
                [key]: false
            }
        })
    }

    render() {
        const list = this.state.list

        const columns = [
            // Answer: ["b"]
            // Id: 10
            // Option: ["a，QQ123456", "b，王者的地盘", "c，球必应官方"]
            // Topic: "一球必应的作者名称中，哪一个符合规范"
            {
                title: 'Id',
                dataIndex: 'Id',
            },
            {
                title: '问题',
                dataIndex: 'Topic',
            },
            {
                title: '选项',
                dataIndex: 'Option',
                render: (text) => {
                    return <div>
                        {text.map(t => <p key={t}>{t}</p>)}
                    </div>
                }
            },
            {
                title: '答案',
                dataIndex: 'Answer',
                render: (text) => {
                    return <div>
                        {text.map(t => <span key={t}>{t}</span>)}
                    </div>
                }
            },
            {
                title: '操作',
                render: (_, record) => {
                    return <div>
                        <a onClick={() => this.deleteQuiz(record)}>删除</a>
                    </div>
                }
            },
        ]


        const table = <Table
            columns={columns}
            dataSource={list}
            rowKey={(record, index) => index}
        />

        let options = this.state.options
        const addModal = <Modal
            visible={this.state.modal.add}
            maskClosable={true}
            onCancel={() => this.cancelModal('add')}
            width='80%'
            onOk={() => this.add()}
        >
            <p>
                问题标题
            </p>
            <Input value={this.state.topic} onChange={event => {this.setState({topic: event.target.value,})}}/>
            <p>
                问题选项
            </p>
            {options.map((option, index) => {
                return <div key={index}>
                    <span>{letters[index]}，</span>
                    <Checkbox onChange={(e) => this.onOptionCheck(e, index)} checked={option.checked}/>
                    <span>选为答案</span>
                    <div style={{display: 'flex',}}>
                        <Input
                            value={option.text}
                            onChange={event => {
                                options[index].text = event.target.value
                                this.setState({
                                    options,
                                })
                            }}
                        />
                        <Button
                            onClick={() => this.deleteOption(index)}
                        >删除选项</Button>
                    </div>

                </div>
            })}
            <Button onClick={() => this.addOption()}>
                添加选项
            </Button>

        </Modal>
        return <>
            {addModal}
            <Admin>
                <div className="list-container">
                    <div>
                        <Button
                            // onClick={}
                            onClick={() => this.callModal('add')}
                        >添加新问题</Button>
                    </div>
                    {table}
                </div>
            </Admin>
        </>
    }
}
export default PlanQuiz